<template>
  <div class="container">
    <!--<video style="width: 100%;height: 3rem" src="http://aldirect.hls.huya.com/huyalive/94525224-2460685313-10568562945082523648-2789274524-10057-A-0-1_1200.m3u8"></video>-->
    <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="playsinline"
            :events="events"
            :options="playerOptions"
            customEventName="customstatechangedeventname"
            @play="onPlayerPlay($event)"
            @pause="onPlayerPause($event)"
            @fullscreenchange="onPlayerFullScreenchange($event)"
    >
    </video-player>
    <div v-show="false" class="guanggao">
      <!--<swiper style="height: 100%" ref="mySwiper">-->
      <!--<swiper-item class="flex-list" :key="index" v-for="(item,index) in matchList">-->
      <!--<div @click="matchClick(item2.start_time,item2)" class="matchBox flex-grow-0" v-for="(item2,i) in item">-->
      <!--<div class="top-desc flex-row">-->
      <!--<div class="flex-grow-1">{{item2.sport_name}}</div>-->
      <!--<div class="flex-grow-1 flex-right match_time">{{item2.start_time}}</div>-->
      <!--</div>-->

      <!--<div class="match_desc">-->
      <!--{{item2.game_name}}-->
      <!--</div>-->
      <!--<div class="match_detail flex-row">-->
      <!--<div class="flex-grow-1 play_box flex-x-center">-->
      <!--<div>-->
      <!--<img style="width: .82rem;height: 0.82rem" :src="item2.pic_a" alt="">-->
      <!--<p class="oneLine">{{item2.play_a_name}}</p>-->
      <!--</div>-->
      <!--</div>-->
      <!--<div class="flex-grow-0">-->
      <!--<div class="matching">竞猜中</div>-->
      <!--</div>-->
      <!--<div class="flex-grow-1 play_box flex-x-center">-->
      <!--<div>-->
      <!--<img style="width: .82rem;height: 0.82rem" :src="item2.pic_b" alt="">-->
      <!--<p class="oneLine">{{item2.play_b_name}}</p>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</div>-->
      <!--</swiper-item>-->
      <!--<div class="swiper-pagination" slot="pagination"></div>-->
      <!--</swiper>-->

      <img style="height: 2.16rem" :src="guanggao.cover" alt="">
    </div>
    <div class="currentMovie flex-row flex-y-center">
      <div class="flex-grow-0 flex-left current">当前频道 :</div>
      <div class="flex-grow-0 title">{{currentMovie}}</div>
      <!--<div class="flex-grow-1 flex-right shareDesc">-->
        <!--{{sharedata.share_title}}-->
      <!--</div>-->
      <!--<div class="flex-grow-0 flex-right flex-y-center fenxiang">-->
      <!--<img style="width: 0.38rem" v-src="'/static/img/fenxiang_icon.png'" alt="">-->
      <!--</div>-->
    </div>
    <div class="itembox vux-1px-b" v-for="(item,index) in movieList ">
      <div class="item-title flex-grow-0"> {{item.title}} :</div>
      <scroller lock-y :scrollbar-x=false :bounce="false">
        <div class="flex-row movielist-box" :style="{width:item.movies.length*1.34+'rem'}">
          <div @click="titleClick(item2.title, item2.id, item2.url)" class="movielist" v-for="(item2,i) in item.movies">
            <div class="imgbox">
              <img v-lazy="item2.avatar" alt="">
            </div>
            <p :class="{'current':item2.id==currentListId}" class="oneLine">{{item2.title}}</p>
          </div>
        </div>
      </scroller>
    </div>
    <!--<div class="itembox vux-1px-b flex-row" v-for="(item,index) in movieList">-->
    <!--<div class="flex-grow-0" style="width: 1.1rem;padding-left: 0.24rem">-->
    <!--<div class="fei_lei_title flex-grow-0 flex-y-center flex-x-center">{{item.title}}</div>-->
    <!--</div>-->
    <!--<div class="center_list clearfix" :class="index==currentIndex?'animate':''">-->
    <!--<div class="list-title fl flex-y-center" @click="titleClick(item2.title,item2.id,item2.url)"-->
    <!--:class="{'current':currentListId==item2.id}" v-for="(item2,i) in item.movies">{{item2.title}}-->
    <!--</div>-->
    <!--&lt;!&ndash;<div class="list-title fl flex-y-center" style="background: transparent"></div>&ndash;&gt;-->
    <!--</div>-->
    <!--<div @click="toggleClick(index)" class="flex-grow-0" style="width: 1rem;padding-left:0.4rem;margin-top: .03rem">-->
    <!--<div class="">-->
    <!--<img :class="index==currentIndex?'roate':''" style="width: 0.24rem" v-src="'/static/img/zhankai.png'" alt="">-->
    <!--</div>-->
    <!--&lt;!&ndash;<button @click="show=!show">切换</button>&ndash;&gt;-->
    <!--</div>-->
    <!--</div>-->
    <!--<div class="bottom-desc flex-x-center">收藏链接不迷路 - _ -</div>-->
    <!--提示-->
    <!--<div class="toast_show" v-show="showToast">该场比赛已结束</div>-->
    <div
            class="downApp"
            id="moveDiv"
            ref="moveDiv"
            @mousedown="down" @touchstart="down"
            @mousemove="move" @touchmove="move"
            @mouseup="end" @touchend="end"
            :class="{'addbottomShow' : showDownTip}"
    >
      <img @click="downapp" v-src="'/static/img/downapp.png'" alt="">
    </div>
  </div>
</template>
<script>
  import {GETMATCHDATA, GETMOVIES, MOVIESCLICK} from 'src/const/uri'
  import {Swiper, SwiperItem, Scroller} from 'vux'
  import MDUtils from 'src/assets/js/md-utils'
  // import APi from 'src/const/data'

  document.title = '极速影院';
  import videojs from 'video.js';
  window.videojs = videojs;
  require('videojs-contrib-hls/dist/videojs-contrib-hls');
  export default {
    name: "Move",
    components: {Swiper, SwiperItem, Scroller},
    data() {
      return {
        currentIndex: null,
        currentMovie: '',
        click: -1,
        events: ['fullscreenchange'],
        playsinline: true,
        playerOptions: {
//        playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
          autoplay: true, //如果true,浏览器准备好时开始回放。
          muted: false, // 默认情况下将会消除任何音频。
          loop: false, // 导致视频一结束就重新开始。
          preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
          language: 'zh-CN',
          aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
          fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
          isFullScreen: true,
          hls: true,
          flash: {hls: {withCredentials: false}},
          html5: {hls: {withCredentials: false}},
          sources: [{
            withCredentials: false,
            type: "application/x-mpegURL",
            // type: 'video/mp4',
            src: 'http://aldirect.hls.huya.com/huyalive/94525224-2460685722-10568564701724147712-2789253838-10057-A-0-1_1200.m3u8' //你的视频地址（必填）
          }],
          poster: '', //你的封面地址
          width: document.documentElement.clientWidth,
          notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
          controlBar: {
            timeDivider: true,
            durationDisplay: true,
            remainingTimeDisplay: false,
            fullscreenToggle: true  //全屏按钮
          }
        },
        currentListId: 1,
        matchList: [],
        movieList: [],
        guanggao: {},
        sharedata: {},
        showToast: false,
        position: {x: 0, y: 0},
        nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '',
        showDownTip: false
      }
    },
    computed: {},
    async mounted() {
      await this.getMovies();
      // await this.titleClick('星爷', 2, 'https://new.jsyunbf.com/20180106/dAmc2KLJ/index.m3u8');
      // await this.getMatchData();
      setTimeout(() => {
        this.showDownTip = true;
        setTimeout(() => {
          this.$refs.moveDiv.style.transition = 'none'
        }, 1500);
      }, 500)
      // this.currentMovie = this.list[0].movies[0].title;
      // Url = this.list[0].movies[0].url;
      // this.$refs.videoPlayer.player.src(Url);
      // this.playerOptions.sources[0].src = Url;
      // this.titleClick(this.list[0].movies[0].title, this.list[0].movies[0].id, this.list[0].movies[0].url);
      // this.$refs.videoPlayer.player.play();
      // this.Player = this.$refs.videoPlayer.player;
      // this.Player.play();
      // console.log(document.querySelector("video"));
      // setTimeout(()=>{
      //   let videoDom = document.querySelector("video");
      //   console.log(videoDom);
      //   videoDom.play();
      // },1000);
      // document.body.addEventListener("touchstart", function () {
      //   let videoDom = document.querySelector("video");
      //   videoDom.play();
      // }, false);
      // // //ios 微信可以；但Android不行
      // document.addEventListener("WeixinJSBridgeReady", function () {
      //   let videoDom = document.querySelector("video");
      //   videoDom.play();
      // }, false);
    },
    methods: {
      getMatchData() {
        //api url // http://tq.94xintuo.com/api/spread/spreadgame
        this.$ajax.get(GETMATCHDATA).then(res => {
          this.matchList = res.data;
          console.log(this.matchList);
        })
      },
      getMovies() {
        this.$ajax.get(GETMOVIES, {}).then(res => {
          // this.movieList = APi;
          this.movieList = res.data.types;
          this.guanggao = res.data.advertise;
          this.sharedata = res.data.shares;
          // console.log(res);
          let defaultMovie = this.movieList[0].movies[0];
          // console.log(defaultMovie);
          this.titleClick(defaultMovie.title, defaultMovie.id, defaultMovie.url)
        });
      },
      onPlayerPlay(player) {
        // player.play();
        // const Player = this.$refs.videoPlayer.player;
        // Player.play();
        console.log(player);
        // console.log(this.$refs.videoPlayer.player);
      },
      onPlayerPause(player) {
        // player.pause();
        const Player = this.$refs.videoPlayer.player;
        Player.pause();
        console.log('暂停了');
      },
      onPlayerFullScreenchange(player) {
        // let videoDom = document.querySelector("video");
        // videoDom.setAttribute('webkit-playsinline', false)
        // videoDom.setAttribute('x5-playsinline', false)
        // videoDom.setAttribute('x5-video-player-type', 'h5')
        // videoDom.setAttribute('x5-video-player-fullscreen', false)
        // this.playsinline=false;
        // alert(12222222)
        // alert(player)
        // player.exitFullscreen() //强制退出全屏，恢复正常大小
        // this.videoDialogVisible = true
      },
      /*
      *  this.$refs.video.setAttribute('playsinline', this.playsinline)
                this.$refs.video.setAttribute('webkit-playsinline', this.playsinline)
                this.$refs.video.setAttribute('x5-playsinline', this.playsinline)
                this.$refs.video.setAttribute('x5-video-player-type', 'h5')
                this.$refs.video.setAttribute('x5-video-player-fullscreen', false)*/
      toggleClick(index) {
        if (this.click !== index) {
          this.currentIndex = index;
          this.click = index;
        } else {
          this.currentIndex = null;
          this.click = -1;
        }
      },
      tongjiclick(id) {
        this.$ajax.put(MOVIESCLICK + id).then(res => {
          console.log(res);
        });
      },
      titleClick(title, id, url) {
        this.currentListId = id;
        this.currentMovie = title;
        this.$refs.videoPlayer.player.src(url);
        this.tongjiclick(id)
      },
      matchClick(startTime, item2) {
        console.log(item2);
        let nowTime = new Date();
        let newStartTime = nowTime.getFullYear() + '/' + startTime;
        let endTime = new Date(newStartTime).getTime();
        let nowTime2 = nowTime.getTime();
        if (endTime - nowTime2 > 0) {
          window.location.href = window.location.origin + '/guess/guessDetails.html' + '?s_id=' + item2.s_id + '&game_id=' + item2.bigGame_id
          //跳转详情
        } else {
          this.showToast = true;
          setTimeout(() => {
            this.showToast = false;
            this.getMatchData();
          }, 2000)
        }
      },
      down() {
        this.flags = true;
        var touch;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        this.position.x = touch.clientX;
        this.position.y = touch.clientY;
        this.dx = this.$refs.moveDiv.offsetLeft;
        this.dy = this.$refs.moveDiv.offsetTop;
      },
      move() {
        if (this.flags) {
          var touch;
          if (event.touches) {
            touch = event.touches[0];
          } else {
            touch = event;
          }
          this.nx = touch.clientX - this.position.x;
          this.ny = touch.clientY - this.position.y;
          this.xPum = this.dx + this.nx;
          this.yPum = this.dy + this.ny;
          this.$refs.moveDiv.style.left = this.xPum + "px";
          this.$refs.moveDiv.style.top = this.yPum + "px";
          //阻止页面的滑动默认事件；如果碰到滑动问题，1.2 请注意是否获取到 touchmove
          event.preventDefault();
          let body = document.body || document.documentElement;
          body.addEventListener("touchmove", function (event) {
            event.preventDefault();
          }, false);
        }
      },
      //鼠标释放时候的函数
      end() {
        this.flags = false;
      },
      downapp(){
        if(MDUtils.is_ios()){
          return false;
          // window.location.href = 'https://www.pgyer.com/CMoU'
        }else if(MDUtils.is_Android()){
          window.location.href = window.location.origin+ '/static/apk/app-debug.apk'
        }
      }
    },
  }
</script>
<style>
  body {
    /*background: #fcfcfc;*/
    background: #f0f0f2;
  }
</style>
<style scoped lang="less">
  .roate {
    transform: rotate(180deg);
  }

  .container {
    padding-bottom: 1rem;
  }

  .currentMovie {
    height: 0.88rem;
    font-size: .24rem;
    padding: 0 0.24rem;
    margin-bottom: 0.24rem;
    /*margin-top: 0.24rem;*/
    background: #fff;
    position: relative;

    .flex-grow-0 {
      /*width: 33.3%;*/
    }

    .current {
      /*padding-left: 0.24rem;*/
      /*color: #929292;*/
      font-size: 0.28rem;
    }

    .title {
      /*margin-left: .1rem;*/
      width: 2rem;
      text-align: center;
      font-size: 0.3rem;
      color: #1e1e1e;
      position: absolute;
      left:50%;
      top: 45%;
      transform: translate(-50%,-50%);
    }

    .shareDesc {
      color: #b3082d;
    }
  }

  .bottom-desc {
    font-size: .24rem;
    color: #929292;
    margin-top: 0.3rem;
    /*padding-left: .24rem;*/
    /*padding-right: 1.2rem;*/
  }

  .itembox {
    padding: 0.15rem 0 0.15rem 0;
    background: #fff;

    .item-title {
      /*padding:0 0.24rem;*/
      /*width: 1.44rem;*/
      /*height: .44rem;*/
      /*border-radius: 0 20px 20px 20px;*/
      /*background: #1ca9fa;*/
      /*color: #fff;*/
      font-size: .28rem;
      padding-left: 0.24rem;
    }

    .movielist-box {
      margin-top: 0.2rem;
      padding-left: 0.24rem;
    }

    .movielist {
      width: 1.34rem;
      text-align: center;
      /*margin-right: 0.30rem;*/

      .imgbox {
        display: inline-block;
        width: 0.88rem;
        height: 0.88rem;
        overflow: hidden;
        border-radius: 50%;
        margin-bottom: .1rem;
      }

      p {
        color: #9c9c9c;
        font-size: 0.24rem;
        font-weight: 600;

        &.current {
          color: #1ca9fa;
          /*border:1px solid #FFAEB9;*/
        }
      }
    }
  }


  .guanggao {
    width: 100%;
    /*height: 1.08rem;*/
    height: 2.16rem;
    margin-top: 0.15rem;
    background: #fff;
    /*border:1px solid red;*/
  }

  /*.swiper-container{*/
  /*background: #fff;*/
  /*}*/

  .matchBox {
    width: 50%;
    padding: 0 0.1rem;
    font-size: 0.24rem;

    .match_time {
      color: #999999;
      font-size: 0.20rem;
    }

    .match_desc {
      margin-top: -0.06rem;
      margin-bottom: 0.05rem;
      font-size: 0.18rem;
      color: #999999;
    }

    .match_detail {
      .matching {
        height: 18px;
        font-size: 12px;
        text-align: center;
        color: #E10019;
        margin-top: 0.26rem;
        border-radius: 3px;
        border: 0.5px solid red;
        padding: 0 .1rem;
      }

      .play_box {
        width: 3rem;
        text-align: center;
      }

      p {
        font-size: 0.24rem;
        margin-top: 0.1rem;
      }
    }
  }

  .toast_show {
    width: 50%;
    background: rgba(17, 17, 17, 0.7);
    color: #fff;
    height: .6rem;
    line-height: .6rem;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    border-radius: 5px;
    z-index: 1000;
    font-size: 0.28rem;
  }

  .downApp {
    position: fixed;
    /*right: 0.1rem;*/
    right: -100px;
    bottom: 1.3rem;
    width: 1rem;
    height: 1rem;
    transition: all 1.5s;

    &.addbottomShow {
      //transform: translateY(-180px);
      transform: translateX(-106px)
    }
  }

</style>
<style>
  .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: -2px;
  }
</style>